const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');    // html压缩
const babel = require('gulp-babel');        // js编译
const uglify = require('gulp-uglify');      // js压缩

const sass = require('gulp-sass-china');    // scss编译
sass.compiler = require('sass');

const cleanCSS = require('gulp-clean-css'); // css压缩
const connect = require("gulp-connect");    // gulp服务器工具
const proxy = require("http-proxy-middleware").createProxyMiddleware;       // 服务器代理工具
const fileinclude = require('gulp-file-include');   // html拼接工具



// 1.html
gulp.task('html',async()=>{
    gulp.src(['./src/html/**/*.html','!./src/html/template/**/*.html'])
    // 拼接操作
    .pipe(fileinclude({
        prefix: '@@',
        basepath: '@file'
    }))
    // html压缩
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('./dist'))
    // 修改html文件后自动刷新浏览器
    .pipe(connect.reload())
})

// 2.js
gulp.task('js',async()=>{
    gulp.src(['./src/javascripts/**/*.js','!src/javascripts/libs/**/*.js'])
    // 转义
    .pipe(babel({
        // 解析方式
        presets:['@babel/env']
    }))
    // js压缩
    .pipe(uglify())
    .pipe(gulp.dest('./dist/javascripts'))
    // 修改js文件后自动刷新浏览器
    .pipe(connect.reload())
})

// 3.scss
gulp.task('scss',async()=>{
    gulp.src(['./src/scss/**/*.scss','!./src/scss/libs/**/*.scss'])
    // 编译成css文件
    .pipe(sass().on('error', sass.logError))
    // css压缩
    .pipe(cleanCSS())
    .pipe(gulp.dest('./dist/css'))
    // 修改scss文件后自动刷新浏览器
    .pipe(connect.reload())
})

// 4.libs：不进行代码更新的js、scss文件单独提取出来
gulp.task('libs',async()=>{
    // js
    gulp.src(['./src/javascripts/libs/**/*.js'])
    .pipe(uglify())
    .pipe(gulp.dest('./dist/javascripts/libs'));

    // scss
    gulp.src(['./src/scss/libs/**/*.scss'])
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./dist/css/libs'));
})

// 5.监听
gulp.task("watch",async()=>{
    gulp.watch(['./src/html/**/*.html'],gulp.parallel('html'));
    gulp.watch(['./src/javascripts/**/*.js'],gulp.parallel('js'));
    gulp.watch(['./src/scss/**/*.scss'],gulp.parallel('scss'));
})

/* // 6.默认||组合
gulp.task("default",gulp.parallel('watch','libs')); */

// 7.配置简易服务器
/* gulp.task('connect',async()=>{
    connect.server({
        root:'./dist',
        port:3000,
        // 开启自动刷新
        livereload:true
    })
}); */

// 8.服务器代理：若要请求到完整数据，正常使用jq的ajax即可
gulp.task('connect',async()=>{
    connect.server({
        root:'./dist',
        port:3000,
        // 开启自动刷新
        livereload:true,
        middleware:function(){
            return [
                // 代理路径
                proxy('/pxx',{
                    // 代理请求目标
                    target:'https://apiv2.pinduoduo.com/api/gindex/subject/limited/goods',
                    // 换源，即代理路径和代理请求目标不能重名
                    changeOrigin:true,
                    // 清空并重写请求路径，即原本的target清空并改为'/pxx'
                    pathRewrite:{
                        '/pxx':''
                    }
                }),
                proxy("/dt", {
                    target :"https://www.duitang.com/napi/blog/list/by_filter_id/",
                    changeOrigin : true,
                    pathRewrite : {
                        "/dt": ""
                    }
               }),
            ]
        }
    })
});

gulp.task('default',gulp.series('libs','html','js','scss',gulp.parallel('watch','connect')));


